<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1190625_baqn94fa9mr.css">
    <link rel="stylesheet" href="../../css/hui.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>商品详情</title>
    <style>
        html,body{
            background-color: #F5F5F9;
        }
        header{
            background: transparent!important;
        }
        .main{
            padding-top: 0;
            padding-bottom: .49rem;
        }
        .mui-action-back{
            font-size: .16rem;
            line-height: .19rem;
            overflow: hidden;
            margin-left: .1rem;
            margin-top: .1rem;
        }
        .mui-icon-back:before, .mui-icon-left-nav:before{
            display: block;
            width: .18rem;
            height: .18rem;
            
            background: #000;
            opacity:0.61;
            border-radius:50%;
        }
        .banner{
            width: 100%;
            height: 3.75rem;
        }
        .banner image{
            width: 3.75rem;
            height: 3.75rem;
        }
        .swiper-container .swiper-wrapper{
            overflow: visible;
        }
        .goods_info{
            width: 100%;
            background: #fff;
            padding: 0 .15rem;
            height: auto;
            overflow: hidden;
        }
        .shop_price{
            width: 100%;
            font-size: .18rem;
            color: #f5b443;
            margin: .1rem auto;
        }
        .maket_price{
            width: 100%;
            font-size: .12rem;
            color: #999;
            text-decoration: line-through;
            margin-bottom: .12rem;
        }
        .goods_name{
            width: 100%;
            line-height: .2rem;
            font-size: .16rem;
            color: #333;
            font-weight: bold;
            overflow:hidden;
            
        }
        .other_info{
            width: 100%;
            height: .35rem;
        }
        .other_info .a{
            font-size: .12rem;
            color: #999;
        }
        .guige{
            width: 100%;
            height: .32rem;
            background-color: #fff;
            padding: 0 .15rem;
            padding-top: .06rem;
            margin-top: .05rem;
        }
        .guige .fl{
            font-size: .14rem;
            color: #999;
        }
        .guige .fr{
            font-size: .14rem;
            color: #333;
        }
        .guige .fr i{
            font-size: .16rem;
            color: #aaa;
        }
        .goods_num{
            width: 100%;
            height: .42rem;
            background-color: #fff;
            padding: .1rem .15rem;
            padding-bottom: .06rem;
        }
        .goods_num .left{
            font-size: .14rem;
            color: #999;
        }
        .num_jisuan{
            min-width: .75rem;
            height: .18rem;
            border: 1px solid #ccc;
        }
        .num_jisuan .left ,.num_jisuan .right{
            width: .24rem;
            height: 100%;
            text-align: center;
            line-height: 1;
            font-size: .14rem;
            color: #999;
        }
        .num_jisuan .left{
            color: #999;
            border-right: 1px solid #ccc;
        }
        .num_jisuan .right{
            color: #333;
            border-left: 1px solid #ccc;
        }
        .num_jisuan .num{
            padding: 0 .05rem;
            font-size: .16rem;
            color: #333;
        }
        .goods_comment{
            width: 100%;
            margin-top: .05rem;
            background-color: #fff;
        }
        .goods_comment .title{
            width: 100%;
            height: .43rem;
            padding: 0 .15rem;
            border-bottom: 1px solid #eee;
        }
        .goods_comment .title .left{
            line-height: .13rem;
        }
        .goods_comment .title .title_name{
            font-size: .14rem;
            color: #333;
            margin: 0 .06rem;
        }
        .bg-zi{
            width: .03rem;
            height: .13rem;
            float: left;
            background-color: #9c53f6;
        }
        .goods_comment .title .pingjia_num{
            font-size: .14rem;
            color: #999;
        }
        .goods_comment .title .right i{
            font-size: .14rem;
            color: #aaa;
        }
        .goods_comment .list{
            width: 100%;
            padding: 0 .15rem;
        }
        .goods_comment .list .item{
            width: 100%;
            overflow: hidden;
        }
        .goods_comment .list .item .t{
            width: 100%;
            height: .2rem;
            margin: .15rem 0 .1rem 0;
        }
        .goods_comment .list .item .t .left img{
            width: .2rem;
            height: .2rem;
            border-radius: 50%;
            float: left;
            margin-right: .06rem;
        }
        .goods_comment .list .item .t .left img span{
            line-height: .2rem;
        }
        .goods_comment .list .item .t .right .user_start{
            float: right;
        }
        .goods_comment .list .item .t .right .user_start i{
            font-size: .18rem;
            color: #ccc;
            margin-right: .1rem;
        }
        .goods_comment .list .item .t .right .user_start .active{
            color: #856fff;
        }
        .goods_comment .list .item .t .right .user_pingfen{
            float: right;
            line-height: .2rem;
            font-size: .14rem;
            color: #9c56f6;
        }
        .goods_comment .list .item .time{
            font-size: .11rem;
            color: #999;
            margin-bottom: .14rem; 
        }
        .goods_comment .list .item .text{
            width: 100%;
            height: auto;
            font-size: .14rem;
            color: #333;
            margin-bottom: .1rem;
        }
        .goods_comment .list .item .goods_imgs{
            width: 100%;
            height: 1.1rem;
            overflow: hidden;
        }
        .goods_comment .list .item:last-child .goods_imgs{
            margin-bottom: .18rem;
        }
        .goods_comment .list .item .goods_imgs img{
            width: 1.1rem;
            height: 1.1rem;
            margin-right: .09rem;
        }
        .goods_detail{
            width: 100%;
            overflow: hidden;
            background-color: #fff;
            margin-top: .05rem;
        }
        .goods_detail .title{
            width: 100%;
            height: .43rem;
            padding: 0 .15rem;
            border-bottom: 1px solid #eee;
        }
        .goods_detail .title .left{
            line-height: .13rem;
        }
        .goods_detail .title .title_name{
            font-size: .14rem;
            color: #333;
            margin: 0 .06rem;
        }
        footer{
            width: 100%;
            height: .49rem;
            position: fixed;
            bottom: 0;
            z-index: 997;
        }
        footer .left{
            width: 1.53rem;
            height: 100%;
            float: left;
            background-color: #F7F7F7;
        }
        footer .left .item{
            overflow: hidden;
            text-align: center;
        }
        footer .left .item i{
            font-size: .22rem;
        }
        footer .left .item  .text{
            width: 100%;
            text-align: center;
            font-size: .12rem;
            color: #333;
        }
        footer .join_car{
            width: 1.11rem;
            height: 100%;
            background-color: #fff;
            float: left;
            font-size: .16rem;
            color: #9c53f6;
            font-weight: bold;
        }
        footer .go_buy{
            width: 1.11rem;
            height: 100%;
            background-color: #9c53f6;
            float: left;
            font-size: .16rem;
            color: #fff;
            font-weight: bold;
        }
        footer .icon-star{
            color: #9c53f6;
        }
        footer .icon-ziyuan{
            color: #333;
        }
        footer .left .active .text{
            color: #9c53f6;
        }
        .guige_left{
            width: 1.53rem;
            height: 100%;
            float: left;
            background-color: #F7F7F7;

        }
        .guige_left div{
            width: auto;
            height: .24rem;
            font-size: .1rem;
            color: #333;
        }
        .guige_left div span{
            font-size: .18rem;
            color: #f5b443;
            font-weight: bold;
            position: relative;
            top: .01rem;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            background-color: #000;
            opacity: .84;
            z-index: 995;
        }
        .choseGuige {
            width: 100%;
            max-height: 3.98rem;
            overflow: hidden;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            z-index: 996;
            padding-bottom: .49rem;
        }
        .choseGuige .currentGoods{
            width: 100%;
            overflow: hidden;
            padding: 0 .14rem;
            margin: .15rem 0 .2rem;
        }
        .choseGuige .currentGoods .left{
            width: 1.22rem;
            height: 1.22rem;
        }
        .choseGuige .currentGoods .right{
            width: 2.09rem;
            height: 1.22rem;
        }
        .choseGuige .currentGoods .text{
            width: 100%;
            font-size: .16rem;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .choseGuige .guige_list {
            width: 100%;
            overflow: hidden;
            padding: 0 .15rem;
        }
        .choseGuige .guige_list .title{
            width: 100%;
            font-size: .14rem;
            color: #999;
            text-align: left;
            margin-bottom: .1rem;
        }
        .choseGuige .guige_list .list{
            width: 100%;
            
        }
        .choseGuige .guige_list .list .item{
            width: 1.6rem;
            height: .28rem;
            text-align: center;
            overflow: hidden;
            border-radius: .14rem;
            background-color: #f8f8fa;
            color: #666;
            font-size: .14rem;
            line-height: .28rem;
            margin-bottom: .15rem;
        }
        .choseGuige .guige_list .list .active{
            background-color: #9C53F6;
            color: #fff;
        }
        .choseGuige .goods_num{
            margin-top: .08rem;
            margin-bottom: .57rem;
        }
        .choseGuige .goods_num .text{
            font-size: .14rem;
            color: #999;
        }
    </style>
</head>
<body>
    <header class="header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    </header>
    <div class="main">
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <!-- <div class="swiper-slide"><img src="" alt=""></div> -->
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="goods_info">
            <div class="shop_price" id="shop_price">￥2560</div>
            <div class="maket_price" id="maket_price">￥3600 </div>
            <div class="goods_name">五星级酒店专用床上四件套 包含两个大枕头 一个抱枕 强烈推荐</div>
            <div class="other_info flex space-between align-items">
                <div class="a sales">已售: 2535</div>
                <div class="a goods_stock">库存: 2535</div>
                <div class="a">运费: 0</div>
            </div>
        </div>
        <div class="auth">
            <img src="../../image/goods_detail_auth.png" alt="">
        </div>
        <div class="guige flex space-between align-items">
            <span class="fl">选择规格</span>
            <span class="fr"><span class="aleadyguige">套餐一</span><i class="iconfont icon-gengduo"></i></span>
        </div>
        <div class="goods_num flex space-between align-items">
            <span class="left">数量</span>
            <div class="num_jisuan flex space-between">
                <div class="left fl">-</div>
                <div class="num">1</div>
                <div class="right fr">+</div>
            </div>
        </div>
        <div class="goods_comment">
            <div class="title flex space-between align-items">
                <div class="left">
                    <div class="bg-zi"></div>
                    <span class="title_name">商品评价</span>
                    <!-- <span class="pingjia_num">(4526人评价)</span> -->
                </div>
                <div class="right">
                    <i class="iconfont icon-gengduo"></i>
                </div>
            </div>
            <div class="list">
                <div class="item">
                    <div class="t flex space-between align-items">
                        <div class="left">
                            <img src="../../image/goods_01.png">
                            <span>爱丽丝</span>
                        </div>
                        <div class="right">
                            <div class="user_pingfen">4.6分</div>
                            <div class="user_start">
                                <i class="iconfont icon-pingfen active"></i>
                                <i class="iconfont icon-pingfen active"></i>
                                <i class="iconfont icon-pingfen active"></i>
                                <i class="iconfont icon-pingfen active"></i>
                                <i class="iconfont icon-pingfen"></i>
                            </div>
                        </div>
                    </div>
                    <div class="time">2019-05-22 16:22</div>
                    <div class="text">检查过了是正品,质量超好，很开心的一次网购。第一次用这个平台，没想价格便宜，东西又好，还会再来</div>
                    <div class="goods_imgs flex flex_start ">
                        <img src="../../image/goods_03.png">
                        <img src="../../image/goods_03.png">
                        <img src="../../image/goods_03.png">
                    </div>
                </div>
                
            </div>
        </div>
        <div class="goods_detail">
            <div class="title flex space-between align-items">
                <div class="left">
                    <div class="bg-zi"></div>
                    <span class="title_name">商品详情</span>
                </div>
            </div>
            <div class="goods_content">
                <img src="../../image/goods_detail_02.png" alt="">
            </div>
        </div>

    </div>
    <!-- 规格弹窗 -->
    <div class="choseGuige" style="display: none">
         <div class="currentGoods">
             <img class="left fl" src="../../image/goods_02.png" alt="">
             <div class="right fr">
                <div class="text">五星级酒店专用四件套五星级酒店专用四件套五星级酒店专用四件套纯棉</div>
                <div class="shop_price">￥2560</div>
             </div>
         </div>
         <div class="guige_list">
             <div class="title">规格</div>
             <div class="list flex flex_wrap space-between">
                <div class="item active">套餐1</div>
                <div class="item">套餐2</div>
                <div class="item">套餐3</div>
                <div class="item">套餐4</div>
             </div>
         </div>
         <div class="goods_num">
             <div class="text fl">数量</div>
             <div class="num_jisuan flex space-between fr">
                <div class="left fl">-</div>
                <div class="num">1</div>
                <div class="right fr">+</div>
            </div>
         </div>
    </div>
    <div class="mask" style="display: none"></div>
    <footer>
        <div class="guige_left flex align-items flex_center" style="display:none">
            <div>合计金额: <span>￥2560</span></div>
        </div>
        <div class="left flex align-items space-around">
            <div class="item linkCar">
                <i class="iconfont icon-gouwuche1"></i>
                <div class="text">购物车</div>
            </div>
            <div class="item kefu">
                <i class="iconfont icon-kefu"></i>
                <div class="text">客服</div>
            </div>
            <div class="item colloct">
                <i class="iconfont icon-star"></i>
                <div class="text">收藏</div>
            </div>
        </div>
        <div class="join_car flex flex_center align-items">加入购物车</div>
        <div class="go_buy flex flex_center align-items">立即购买</div>
    </footer>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/swiper.min.js"></script>
<script src="../../js/hui.js"></script>
<script src="../../js/common.js"></script>
<script>
    $(document).ready(function(){
        var id = getQueryString('id'); // 商品id
        var goodsData = ''; // 商品详情

        console.log(id)
        throttle(init())
        function init(){
            hui.loading('加载中')
            getDetail()
            isCollect()
            getGoodsEval()
        }
        //获取商品详情
        function getDetail(){
            ajax('/api/goods/get_goods_detail',{id:id,start:0},function(res){
                if (res.code == 1) {
                    var dt = res.data || []
                    goodsData = dt;
                    if (!dt)return
                    //商品轮播图
                    var bannerStr = "";
                    dt.goods_imgs.map(v=>{
                        bannerStr+='<div class="swiper-slide"><img src="'+v.img+'" alt=""></div>'
                    })
                    $('.swiper-wrapper').html(bannerStr)
                    startSwiper()
                    //价格赋值
                    $('#shop_price').html('￥'+dt.shop_price)
                    $('#maket_price').html('￥'+dt.market_price)
                    $('.goods_name').html(dt.goods_name)
                    $('.sales').html('已售 : '+dt.sales)
                    $('.goods_stock').html('库存 : '+dt.goods_stock)
                    $('.goods_content').html(dt.detail)
                    //渲染规格
                    var guigeStr = "";
                    dt.attribute.map((v,i)=>{
                        if (i == 0) {
                            guigeStr+='<div class="item active" data-id="'+v.id+'" data-price="'+v.price+'" data-src="'+v.img+'">'+v.attr+'</div>'
                        }else{
                            guigeStr+='<div class="item" data-id="'+v.id+'" data-price="'+v.price+'" data-src="'+v.img+'">'+v.attr+'</div>'
                        }
                    })
                    $('.guige_list .list').html(guigeStr)
                    guigexr()
                    
                }
            })
        }
        //获取商品评价
        function getGoodsEval(){
            ajax('/api/goods/get_goods_comment',{id:id,start:0,appraise_type:0},function(res){
                if (res.code == 1) {
                    var commonStr = "";
                    var dt = res.appraise_list;
                    dt.map((v,i)=>{
                        if (i<2) {
                            commonStr+='<div class="item"><div class="t flex space-between align-items">'
                                            +'<div class="left"><img src="'+v.user.headimg+'"><span>'+v.user.username+'</span>'
                                            +'</div><div class="right"><div class="user_pingfen">'+v.appraise_star+'分</div>'
                                            +'<div class="user_start">'+function(){
                                                var star =  Number(v.appraise_star);
                                                var starStr = "";
                                                for (let i = 0; i < 5; i++) {
                                                    if (i<star) {
                                                        starStr+='<i class="iconfont icon-pingfen active"></i>'
                                                    } else {
                                                        starStr+='<i class="iconfont icon-pingfen"></i>'
                                                    }
                                                }
                                                return starStr
                                            }()+'</div></div>'
                                            +'</div><div class="time">'+v.create_time+'</div>'
                                            +'<div class="text">'+v.content+'</div>'
                                            +'<div class="goods_imgs flex flex_start" style="display:'+function(){ var vimg = v.img || []; return vimg.length == 0 ? "none" : "block"   }()+'">'+function(){
                                                var imgstr = "";
                                                var vimg = v.img || [];
                                                vimg.map(val=>{
                                                    imgstr+='<img src="'+val+'">';
                                                })
                                                return imgstr
                                            }()+'</div></div>'
                        }
                    })
                    $('.goods_comment .list').html(commonStr)
                }else{
                    $('.goods_comment').remove()
                }
            })
        }
        //获取商品是否被用户收藏
        function isCollect(){
            if(!isLogin())return
            ajax('/api/goods/is_collect',{goods_id:id},function(res){
                if (res.code == 1) {
                    res.data.is_collect == 0 ? "" : $('.colloct').addClass('active')
                }
            })
        }
        //添加或取消收藏
        function addCollect(){
            if(!isLogin())return
            ajax('/api/goods/goods_collect',{goods_id:id},function(res){})
        }
        function guigexr(){
            var ele = $('.guige_list .list .active');
            $('.currentGoods img').attr('src',ele.data('src'));
            $('.currentGoods .text').html(ele.html());
            $('.currentGoods .shop_price').html('￥'+ele.data('price'));
            $('.aleadyguige').html(ele.html())
            var price = Number(ele.data('price'));
            var num = Number($('.num_jisuan .num').html());
            if (!isNaN(price) && !isNaN(num)) {
                var totalPrice = setNum2(price * num)
                $('.guige_left span').html('￥'+totalPrice)
            }
        }
        //@click 商品数量加减
        $('.num_jisuan .left').click(function(){
        var currentNum = Number($('.num_jisuan .num').html())
        currentNum--
        if (currentNum > 0) {
            $('.num_jisuan .num').html(currentNum)
            guigexr()
        }
        })
        $('.num_jisuan .right').click(function(){
            var currentNum = Number($('.num_jisuan .num').html())
            currentNum++
            if (currentNum > 0) {
                $('.num_jisuan .num').html(currentNum)
                guigexr()
            }
        })
        //@click 商品收藏
        $('.colloct').click(function(){
            if ($(this).find('i').hasClass('icon-ziyuan')) {
                //收藏逻辑
                $(this).addClass('active').find('i').removeClass('icon-ziyuan')
            }else{
                //取消收藏逻辑
                $(this).removeClass('active').find('i').addClass('icon-ziyuan')
            }
            addCollect()
        })
        //@click 具体规格选择
        $('.choseGuige').on('click','.item',function(){
            $(this).addClass('active').siblings().removeClass('active')
            guigexr()
            
        })
        //@click 点击规格唤出弹窗
        $('.guige').click(function(){
            openGuige()
        })
        //@click 遮罩层事件
        $('.mask').click(function(){
            closeGuige()
        })
        //@click跳转购物车
        $('.linkCar').click(function(){
            if (!isLogin()){
                hui.toast('请登录')
                window.location.href = '../user/login.html'
            }else{
                linkTab(2)
            }
        })

        //@click 点击客服
        $('.kefu').click(function(){
            if (!isLogin()){
                hui.toast('请登录')
            }

        })
        //@click:点击购物车
        $('.join_car').click(function(){
            if (!isLogin())return
            if ($('.choseGuige').css('display') == "none") {
                openGuige()
            } else {
                var ele = $('.guige_list .list .active');
                var config = {
                    goods_id:id,
                    goods_name:goodsData.goods_name,
                    goods_attr_id:ele.data('id'),
                    goods_attr_value:ele.html(),
                    goods_num:$('.num_jisuan .num').html(),
                    shop_price:ele.data('price')
                };
                ajax('/api/app/add_goods_cart',config,function(res){
                    if (res.code == 1) {
                        closeGuige()
                        setTimeout(function(){
                            hui.toast('添加购物车成功')
                        },500)
                       
                    }
                })
            }
            
        })
        //@fn:打开规格选窗
        function openGuige(){
            $('.mask').show();
            $('footer .left').hide();
            $('footer .guige_left').show();
            $('.choseGuige').show();
            $('.choseGuige').css({height:'auto'})
            var guigeHeight = $('.choseGuige').height()+30;
            $('.choseGuige').css({height:'0'})
            $('.choseGuige').animate({height:guigeHeight},400)
        }
        //@fn:关闭规格选窗
        function closeGuige(){
            $('.mask').hide();
            $('footer .left').show();
            $('footer .guige_left').hide();
            $('.choseGuige').animate({height:0},400)
            $('.choseGuige').hide()
        }
    })
    
   
</script>
</html>